<template>
  <div>
      <h1>第五题</h1>
      <!-- 封装一个返回随机颜色字符串的函数, 并且设置p标签的背景色 -->
      <button @click="btn">点击设置下面颜色</button>
      <div class="main" ref="main"></div>
  </div>
</template>

<script>
export default {
  computed:{
    color(){
          const r = Math.floor(Math.random()*256);
          const g = Math.floor(Math.random()*256);
          const b = Math.floor(Math.random()*256);
          return `rgb(${r},${g},${b})`;
    }
  },
  methods: {
    btn(){
      this.$refs.main.style.backgroundColor= this.color;
    }
  }
}
</script>

<style scoped>
  .main {
    width: 200px;
    height: 200px;
    border: 1px solid;
  }
</style>